<template>
  <el-card shadow="never" :body-style="{ padding: '20px' }">
    <el-form :model="form" label-width="100px" :rules="rules">
      <el-form-item label="主页图片1" prop="pictureOne">
        <el-upload
          class="avatar-uploader"
          action="#"
          :on-change="handleTitleImageChangeOne"
          :auto-upload="false"
          :show-file-list="false"
        >
          <img v-if="form.pictureOne" :src="form.pictureOne" class="avatar" />
          <el-icon v-else class="avatar-uploader-icon">
            <Plus />
          </el-icon>
        </el-upload>
      </el-form-item>
      <el-form-item label="介绍" prop="textOne">
        <el-input v-model="form.textOne" clearable />
      </el-form-item>
      <el-form-item label="描述" prop="textTwo">
        <el-input v-model="form.textTwo" clearable />
      </el-form-item>
      <el-form-item label="主页图片2" prop="pictureTwo">
        <el-upload
          class="avatar-uploader"
          action="#"
          :on-change="handleTitleImageChangeTwo"
          :auto-upload="false"
          :show-file-list="false"
        >
          <img v-if="form.pictureTwo" :src="form.pictureTwo" class="avatar" />
          <el-icon v-else class="avatar-uploader-icon">
            <Plus />
          </el-icon>
        </el-upload>
      </el-form-item>
      <el-form-item label="描述1" prop="textThree">
        <el-input v-model="form.textThree" clearable />
      </el-form-item>
      <el-form-item label="描述2" prop="textFour">
        <el-input v-model="form.textFour" clearable />
      </el-form-item>

      <el-form-item label="主页图片3" prop="pictureThree">
        <el-upload
          class="avatar-uploader"
          action="#"
          :on-change="handleTitleImageChangeThree"
          :auto-upload="false"
          :show-file-list="false"
        >
          <img
            v-if="form.pictureThree"
            :src="form.pictureThree"
            class="avatar"
          />
          <el-icon v-else class="avatar-uploader-icon">
            <Plus />
          </el-icon>
        </el-upload>
      </el-form-item>
      <el-form-item label="描述3" prop="textFive">
        <el-input v-model="form.textFive" clearable />
      </el-form-item>
      <el-form-item label="描述4" prop="textSix">
        <el-input v-model="form.textSix" clearable />
      </el-form-item>

      <el-form-item label="主页图片4" prop="pictureFour">
        <el-upload
          class="avatar-uploader"
          action="#"
          :on-change="handleTitleImageChangeFour"
          :auto-upload="false"
          :show-file-list="false"
        >
          <img v-if="form.pictureFour" :src="form.pictureFour" class="avatar" />
          <el-icon v-else class="avatar-uploader-icon">
            <Plus />
          </el-icon>
        </el-upload>
      </el-form-item>
      <el-form-item label="结语" prop="textSeven">
        <el-input v-model="form.textSeven" clearable />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">保存</el-button>
      </el-form-item>
    </el-form>
  </el-card>
</template>

<script setup>
import { reactive, ref } from "vue";
import { Check, Close } from "@element-plus/icons-vue";
import { uploadFile } from "@/api/admin/file";
import { showMessage } from "@/composables/util";
import { getBlogMineDetail, updateBlogMine } from "@/api/admin/blogsetting";



const form = reactive({
  pictureOne: "",
  textOne: "",
  textTwo: "",
  pictureTwo: "",
  textThree: "",
  textFour: "",
  pictureThree: "",
  textFive: "",
  textSix: "",
  pictureFour: "",
  textSeven: "",
});

const rules = {
  pictureOne: [{ required: true, message: "请选择图片", trigger: "blur" }],
  textOne: [{ required: true, message: "请输入介绍", trigger: "blur" }],
  textTwo: [{ required: true, message: "请输入描述", trigger: "blur" }],
  pictureTwo: [{ required: true, message: "请选择图片", trigger: "blur" }],
  textThree: [{ required: true, message: "请输入描述1", trigger: "blur" }],
  textFour: [{ required: true, message: "请输入描述2", trigger: "blur" }],
  pictureThree: [{ required: true, message: "请选择图片", trigger: "blur" }],
  textFive: [{ required: true, message: "请输入描述3", trigger: "blur" }],
  textSix: [{ required: true, message: "请输入描述4", trigger: "blur" }],
  pictureFour: [{ required: true, message: "请选择图片", trigger: "blur" }],
  textSeven: [{ required: true, message: "请输入结语", trigger: "blur" }],
};

const handleTitleImageChangeOne = (file) => {
  console.log("开始上传文件");
  console.log(file);
  let formData = new FormData();
  formData.append("file", file.raw);
  uploadFile(formData).then((e) => {
    if (e.success == false) {
      let message = e.message;
      showMessage(message, "error", "message");
      return;
    }
    form.pictureOne = e.data.url;
    showMessage("头像上传成功", "success", "message");
  });
};
const handleTitleImageChangeTwo = (file) => {
  console.log("开始上传文件");
  console.log(file);
  let formData = new FormData();
  formData.append("file", file.raw);
  uploadFile(formData).then((e) => {
    if (e.success == false) {
      let message = e.message;
      showMessage(message, "error", "message");
      return;
    }
    form.pictureTwo = e.data.url;
    showMessage("头像上传成功", "success", "message");
  });
};
const handleTitleImageChangeThree = (file) => {
  console.log("开始上传文件");
  console.log(file);
  let formData = new FormData();
  formData.append("file", file.raw);
  uploadFile(formData).then((e) => {
    if (e.success == false) {
      let message = e.message;
      showMessage(message, "error", "message");
      return;
    }
    form.pictureThree = e.data.url;
    showMessage("头像上传成功", "success", "message");
  });
};
const handleTitleImageChangeFour = (file) => {
  console.log("开始上传文件");
  console.log(file);
  let formData = new FormData();
  formData.append("file", file.raw);
  uploadFile(formData).then((e) => {
    if (e.success == false) {
      let message = e.message;
      showMessage(message, "error", "message");
      return;
    }
    form.pictureFour = e.data.url;
    showMessage("头像上传成功", "success", "message");
  });
};

function initBlogMine() {
  getBlogMineDetail().then((e) => {
    if (e.success == true) {
      form.pictureOne = e.data.pictureOne;
      form.textOne = e.data.textOne;
      form.textTwo = e.data.textTwo;
      form.pictureTwo = e.data.pictureTwo;
      form.textThree = e.data.textThree;
      form.textFour = e.data.textFour;
      form.pictureThree = e.data.pictureThree;
      form.textFive = e.data.textFive;
      form.textSix = e.data.textSix;
      form.pictureFour = e.data.pictureFour;
      form.textSeven = e.data.textSeven;
    }
  });
}
initBlogMine();

const onSubmit = () => {
  console.log("提交内容" + form.content);
  updateBlogMine(form).then((e) => {
    console.log(e);
    if (e.success == false) {
      var message = e.message;
      showMessage(message, "warning", "message");
      return;
    }

    showMessage("更新成功", "success", "message");
    initBlogMine();
  });
};
</script>
<style scoped>
.avatar {
  height: 100px;
  width: 180px;
}
</style>
